<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精准询价</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style_zj.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
</head>
<body>
<!--<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>-->
<div class="content-box">
    <!--<div id="left_tab_html">
        <iframe id="left_tab" src="left_tab.html?x=3&y=4" frameborder="0"></iframe>
    </div>-->
    <div class="right-box layui-form quali_honor" id="vue-box">
        <div class="friend-tips">
            <div class="title-box"><i class="icon-sty"></i><b class="title-tip">温馨提示</b></div>
            <div class="info-list">1、以下为发布企业动态栏目，可发文字介绍及插入图片！</div>
            <div class="info-list">2、编辑完成后点击页面下方的发布即可将动态更新至店铺。</div>
        </div>
        <div class="content-admin">

            <div class="title-toggle">
                <div class="item active js-promit">发布动态</div>
                <span class="btn-sty11 fr" onClick="javascript :history.back(-1);">返回</span>
            </div>
            <div class="inquire-input-c">
                <div class="item">
                    <div>
                        <div class="input-box1">
                            <div class="li clearfix">
                                <div class="left-k"><span class="col-ff4"></span><span class="text-sty1">动态标题</span></div>
                            </div>
                            <div class="li clearfix">
                                <input type="text" class="layui-input input-v mr-20 js-title" style="margin-left: 0;">
                            </div>
                            <div class="li clearfix">
                                <div class="left-k"><span class="col-ff4"></span><span class="text-sty1">动态配图</span></div>
                            </div>
                            <div class="li clearfix">
                                <div class="file-img">
                                    <div class="box-file">
                                        <img src="../img/file1.png" alt="" class="upload_btn">
                                    </div>
                                </div>
                            </div>
                            <div class="li clearfix">
                                <div class="left-k"><span class="col-ff4"></span><span class="text-sty1">动态详情</span></div>
                                <div class="right-v">

                                </div>
                            </div>
                            <div class="li clearfix">
                                <div class="right-v wid-820">
                                    <textarea id="demo" style="display: none;"></textarea>
                                </div>
                            </div>
                            <div class="">
                                <span class="release-btn1 js-add">保存</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--<div>
    <iframe src="footer-record.html" style="width: 100%;border: none;height:60px;"></iframe>
</div>-->
<script src="../js/config.js"></script>

<script>
    var edit = '';
    var layedit = '';
    if(getUrlParam('id')){   //编辑回显
        $('.js-promit').html('编辑动态');
        get_ajax("/cms/findInfoById", {id:getUrlParam('id')}, function (data) {
            $('.js-title').val(data.title)
            $('#demo').val(data.content);
            if(data.picUrl){
                var picArr = data.picUrl.split(',');
                picArr.forEach(function(item){
                    var el ='<div class="box-file" data-picUrl="'+item+'">'
                        +'<span class="del-png icon_close"></span>'
                        +'<img src="'+imgBaseUrl+item+'" alt="" class="upload_btn">'
                        +'</div>'
                    $('.file-img').append(el);
                })
            }

        })
    }






    var app = new Vue({
        el: '#vue-box',
        data: {

        },
        mounted:function(){

        },
        updated:function () {

        },
        methods:{

        }
    });


    //图片上传
    layui.use(['upload'], function () {
        var $ = layui.jquery, upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '.upload_btn'
            ,multiple:true
            , url: baseUrl + '/file/upload?token=' + Token
            , before: function (obj) {
                loading = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
            }
            , done: function (res, index) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg.msg('上传失败');
                } else {
                    var data = res.data;
//                    var str = '<div class="upload_img" picUrl="' + data.address + '" picId="' + data.id + '">' +
//                        '<i class="icon_delete"></i><img src="' + imgBaseUrl + data.address
//                        + '" alt=""></div>'
//                    this.item.parents(".file").after(str);
                    var el ='<div class="box-file" data-picUrl="'+data.address+'">'
                        +'<span class="del-png icon_close"></span>'
                        +'<img src="'+imgBaseUrl+data.address+'" alt="" class="upload_btn">'
                        +'</div>'
                    $('.file-img').append(el);
                    layer.close(loading);
                    console.log('上传成功！')
                }

            }
            , error: function () {

            }
        });
    })
    //    del-png
    $(document).on('click','.del-png',function(){
        $(this).parents('.box-file').remove();
    })

    $('.js-add').on('click',function(){  //新增
        var pngStr = '';
        $('.box-file').each(function(index){
            if(index>0){
                pngStr += $(this).attr('data-picurl')+','
            }
        })
        var picUrl = pngStr.slice(0,pngStr.length-1);
        var content = layedit.getContent(edit)
        if(getUrlParam('id')){
            get_ajax("/cms/editNewInfo", {id:getUrlParam('id'),title:$('.js-title').val(),
                content:content,picUrl:picUrl,type:0
            }, function (data) {
                layer.msg('编辑成功！');
                addNewBlack();
            })
        }else{
            get_ajax("/cms/saveNewInfo", {title:$('.js-title').val(),content:content,picUrl:picUrl,type:0}, function (data) {
                layer.msg('发布成功！');
                addNewBlack();
            })
        }

    })

    setTimeout(function(){
        layui.use('layedit', function(){
            layedit = layui.layedit;
            layedit.build('demo'); //建立编辑器
            layedit.set({
                uploadImage: {
                    url: baseUrl + '/file/layeditUplode?token=' + Token,
                    type: "post"
                }
            });
            edit = layedit.build('demo');
        });
    },200)
</script>
</body>
</html>